<template>
  <div class="purchase-order-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>采购订单详情 - {{ orderData.number }}</span>
          <el-tag :type="statusMap[orderData.status]?.type || 'info'">
            {{ orderData.status }}
          </el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单编号">{{ orderData.number }}</el-descriptions-item>
        <el-descriptions-item label="商品ID">{{ orderData.productId }}</el-descriptions-item>
        <el-descriptions-item label="采购数量">{{ orderData.quantity }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ orderData.supplier }}</el-descriptions-item>
        <el-descriptions-item label="采购地区">{{ orderData.area }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ orderData.createdAt }}</el-descriptions-item>
      </el-descriptions>

      <div class="action-buttons" style="margin-top: 20px;">
        <el-button 
          v-if="orderData.status === '待审核'"
          type="primary"
          @click="handleApprove"
        >审核通过</el-button>
        <el-button 
          v-if="orderData.status === '待审核'"
          type="danger"
          @click="handleReject"
        >审核不通过</el-button>
        <el-button 
          v-if="['待采购','采购中'].includes(orderData.status)"
          type="success"
          @click="handleComplete"
        >完成采购</el-button>
        <el-button 
          v-if="['审核不通过'].includes(orderData.status)"
          type="warning"
          @click="handleReSubmit"
        >重新提交</el-button>
        <el-button 
          v-if="['审核不通过'].includes(orderData.status)"
          type="danger"
          @click="handleCancel"
        >取消订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { purchaseApi } from '@/api/purchase'

const route = useRoute()
const orderData = ref({
  number: '',
  productId: '',
  quantity: 0,
  supplier: '',
  area: '',
  status: '',
  createdAt: ''
})

// 状态颜色映射
const statusMap = {
  '待审核': { type: 'info' },
  '审核不通过': { type: 'danger' },
  '待采购': { type: 'warning' },
  '采购中': { type: 'primary' },
  '已完成': { type: 'success' }
}

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const res = await purchaseApi.getPurchaseOrderDetail(route.params.id)
    orderData.value = res
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '获取订单详情失败')
  }
}
// 重新提交
const handleReSubmit = async () => {
  try {
    await purchaseApi.reAuditPurchaseOrder(route.params.id)
    ElMessage.success('重新提交成功')
    await fetchOrderDetail() // 刷新列表
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '重新提交失败')
  }
}
// 审核通过
const handleApprove = async () => {
  try {
    await purchaseApi.approvePurchaseOrder(route.params.id)
    ElMessage.success('审核通过')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '审核失败')
  }
}
// 取消订单
const handleCancel = async () => {
  try {
    await purchaseApi.cancelPurchaseOrder(route.params.id)
    ElMessage.success('订单取消成功')
    await fetchOrderDetail() // 刷新列表
  }
  catch (err) {
    ElMessage.error(err.response?.data?.message || '取消订单失败')
  }
}
// 审核不通过
const handleReject = async () => {
  try {
    await purchaseApi.rejectPurchaseOrder(route.params.id)
    ElMessage.success('审核不通过')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '审核失败')
  }
}

// 完成采购
const handleComplete = async () => {
  try {
    await purchaseApi.completePurchase(route.params.id)
    ElMessage.success('采购完成')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '完成采购失败')
  }
}

onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.purchase-order-detail-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.blank-container {
  margin: 20px;
  padding: 20px;
}
</style>